[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import TonnageDashboard from "@/components/tonnage-dashboard" export default function Home() { return } [V0_FILE]typescriptreact:file="components/ui/command.tsx" isMerged="true" "use client" import * as React from "react" import type { DialogProps } from "@radix-ui/react-dialog" import { Command as CommandPrimitive } from "cmdk" import { Search } from "lucide-react" import { cn } from "@/lib/utils" import { Dialog, DialogContent } from "@/components/ui/dialog" const Command = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Command.displayName = CommandPrimitive.displayName interface CommandDialogProps extends DialogProps {} const CommandDialog = ({ children, ...props }: CommandDialogProps) => { return ( ) } const CommandInput = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => (

)) CommandInput.displayName = CommandPrimitive.Input.displayName const CommandList = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) CommandList.displayName = CommandPrimitive.List.displayName const CommandEmpty = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) CommandEmpty.displayName = CommandPrimitive.Empty.displayName const CommandGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) CommandGroup.displayName = CommandPrimitive.Group.displayName const CommandSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) CommandSeparator.displayName = CommandPrimitive.Separator.displayName const CommandItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) CommandItem.displayName = CommandPrimitive.Item.displayName const CommandShortcut = ({ className, ...props }: React.HTMLAttributes) => { return } CommandShortcut.displayName = "CommandShortcut" export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, } [V0_FILE]typescriptreact:file="components/ui/separator.tsx" isMerged="true" "use client" import * as React from "react" import * as SeparatorPrimitive from "@radix-ui/react-separator" import { cn } from "@/lib/utils" const Separator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => ( )) Separator.displayName = SeparatorPrimitive.Root.displayName export { Separator } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { default: "border bg-background text-foreground", destructive: "destructive border-destructive bg-destructive text-destructive-foreground", success: "border-green-500 bg-green-950 text-green-50", }, }, defaultVariants: { variant: "default", }, }, ) const Toast = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="hooks/use-toast.ts" isMerged="true" "use client" import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 1 const TOAST_REMOVE_DELAY = 1000000 type ToasterToast = ToastProps & { id: string title?: React.ReactNode description?: React.ReactNode action?: ToastActionElement } const actionTypes = { ADD_TOAST: "ADD_TOAST", UPDATE_TOAST: "UPDATE_TOAST", DISMISS_TOAST: "DISMISS_TOAST", REMOVE_TOAST: "REMOVE_TOAST", } as const let count = 0 function genId() { count = (count + 1) % Number.MAX_SAFE_INTEGER return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: ToasterToast["id"] } | { type: ActionType["REMOVE_TOAST"] toastId?: ToasterToast["id"] } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() const addToRemoveQueue = (toastId: string) => { if (toastTimeouts.has(toastId)) { return } const timeout = setTimeout(() => { toastTimeouts.delete(toastId) dispatch({ type: "REMOVE_TOAST", toastId: toastId, }) }, TOAST_REMOVE_DELAY) toastTimeouts.set(toastId, timeout) } export const reducer = (state: State, action: Action): State => { switch (action.type) { case "ADD_TOAST": return { ...state, toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT), } case "UPDATE_TOAST": return { ...state, toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)), } case "DISMISS_TOAST": { const { toastId } = action // ! Side effects ! - This could be extracted into a dismissToast() action, // but I'll keep it here for simplicity if (toastId) { addToRemoveQueue(toastId) } else { state.toasts.forEach((toast) => { addToRemoveQueue(toast.id) }) } return { ...state, toasts: state.toasts.map((t) => t.id === toastId || toastId === undefined ? { ...t, open: false, } : t, ), } } case "REMOVE_TOAST": if (action.toastId === undefined) { return { ...state, toasts: [], } } return { ...state, toasts: state.toasts.filter((t) => t.id !== action.toastId), } } } const listeners: Array<(state: State) => void> = [] let memoryState: State = { toasts: [] } function dispatch(action: Action) { memoryState = reducer(memoryState, action) listeners.forEach((listener) => { listener(memoryState) }) } type Toast = Omit function toast({ ...props }: Toast) { const id = genId() const update = (props: ToasterToast) => dispatch({ type: "UPDATE_TOAST", toast: { ...props, id }, }) const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id }) dispatch({ type: "ADD_TOAST", toast: { ...props, id, open: true, onOpenChange: (open) => { if (!open) dismiss() }, }, }) return { id: id, dismiss, update, } } function useToast() { const [state, setState] = React.useState(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, [state]) return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isMerged="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/hooks/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescript:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, // Chart colors chart: { "1": "hsl(var(--chart-1))", "2": "hsl(var(--chart-2))", "3": "hsl(var(--chart-3))", "4": "hsl(var(--chart-4))", "5": "hsl(var(--chart-5))", "6": "hsl(var(--chart-6))", "7": "hsl(var(--chart-7))", "8": "hsl(var(--chart-8))", "9": "hsl(var(--chart-9))", "10": "hsl(var(--chart-10))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/faceted-filter.tsx" isMerged="true" "use client" import type * as React from "react" import { useState } from "react" import { Check, PlusCircle, X } from "lucide-react" import { cn } from "@/lib/utils" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { Separator } from "@/components/ui/separator" import { Input } from "@/components/ui/input" interface FacetedFilterProps { title?: string options: { label: string value: string icon?: React.ComponentType<{ className?: string }> }[] selectedValues: Set onSelectionChange: (values: Set) => void } export function FacetedFilter({ title, options, selectedValues, onSelectionChange }: FacetedFilterProps) { const [searchTerm, setSearchTerm] = useState("") const [isOpen, setIsOpen] = useState(false) const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase())) const handleToggleOption = (optionValue: string) => { const newValues = new Set(selectedValues) if (selectedValues.has(optionValue)) { newValues.delete(optionValue) } else { newValues.add(optionValue) } onSelectionChange(newValues) } const handleClearAll = () => { onSelectionChange(new Set()) setIsOpen(false) } return (

{/* Search Input */} setSearchTerm(e.target.value)} className="h-8 text-sm" /> {/* Options List */}

{filteredOptions.length === 0 ? (

No results found

) : ( filteredOptions.map((option) => { const isSelected = selectedValues.has(option.value) return (

handleToggleOption(option.value)} >

{isSelected && }

{option.icon && } {option.label}

) }) )}

{/* Clear All Button */} {selectedValues.size > 0 && ( <> )}

) } [V0_FILE]typescript:file="lib/utils.ts" isQuickEdit="true" isMerged="true" import { clsx } from "clsx" // merge class names just like before export function cn(...inputs: unknown[]) { // clsx already handles arrays / objects / strings // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore return clsx(...inputs) } [V0_FILE]typescript:file="lib/supabase.ts" isEdit="true" isMerged="true" import { createClient } from "@supabase/supabase-js" const supabaseUrl = "https://ffasqfccgbgopxpfqrus.supabase.co" const supabaseKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImZmYXNxZmNjZ2Jnb3B4cGZxcnVzIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImlhdCI6MTc1MTg2OTEwNCwiZXhwIjoyMDY3NDQ1MTA0fQ.8B6URog2lDENg5cuBlUdpn2CiVEJiKHiMINJfNgvqZc" export const supabase = createClient(supabaseUrl, supabaseKey) export interface TonnageRecord { id: number Date: string "Flight No.": string // Keeping database field name for compatibility, but will display as "Shipment ID" ACM: string // Will display as "Vehicle Type" KG: number Reg: string // Will display as "Vehicle ID" Month: string Year: number Day: string Sector: string Dep: string // Will display as "Origin" Arr: string // Will display as "Destination" "Out/In": string Station: string "Dom/Int": string } [V0_FILE]typescriptreact:file="components/record-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { X, Save, CheckCircle } from "lucide-react" import { supabase, type TonnageRecord } from "@/lib/supabase" import { format } from "date-fns" import { useToast } from "@/hooks/use-toast" interface RecordModalProps { isOpen: boolean onClose: () => void onSuccess: () => void record?: TonnageRecord | null mode: "add" | "edit" } export default function RecordModal({ isOpen, onClose, onSuccess, record, mode }: RecordModalProps) { const [loading, setLoading] = useState(false) const { toast } = useToast() const [formData, setFormData] = useState({ Date: "", "Flight No.": "", ACM: "", KG: "", Reg: "", Dep: "", Arr: "", "Out/In": "", }) useEffect(() => { if (isOpen) { if (mode === "edit" && record) { // Populate form with existing record data setFormData({ Date: record.Date ? record.Date.split("T")[0] : "", "Flight No.": record["Flight No."] || "", ACM: record.ACM || "", KG: record.KG?.toString() || "", Reg: record.Reg || "", Dep: record.Dep || "", Arr: record.Arr || "", "Out/In": record["Out/In"] || "", }) } else { // Reset form for add mode setFormData({ Date: "", "Flight No.": "", ACM: "", KG: "", Reg: "", Dep: "", Arr: "", "Out/In": "", }) } } }, [isOpen, mode, record]) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (!formData.Date || !formData["Flight No."] || !formData.KG) { toast({ variant: "destructive", title: "Validation Error", description: "Please fill in required fields: Date, Shipment ID, and KG", }) return } setLoading(true) try { // Common data (shared by add & edit) const baseData = { ...formData, KG: Number(formData.KG), Year: new Date(formData.Date).getFullYear(), Month: format(new Date(formData.Date), "MMMM"), Day: format(new Date(formData.Date), "EEEE"), } if (mode === "add") { // Get the next available ID by finding the max ID and adding 1 const { data: maxIdData, error: maxIdError } = await supabase .from("Raya-Tonnage") .select("id") .order("id", { ascending: false }) .limit(1) if (maxIdError) { console.error("Error getting max ID:", maxIdError) throw maxIdError } const nextId = maxIdData && maxIdData.length > 0 ? maxIdData[0].id + 1 : 1 const recordData = { id: nextId, ...baseData, } const { error } = await supabase.from("Raya-Tonnage").insert([recordData]) if (error) throw error toast({ variant: "success", title: "Success", description: "Record added successfully!", }) } else if (mode === "edit" && record) { // 🔸 Do NOT overwrite the id when updating const recordData = { ...baseData } const { error } = await supabase.from("Raya-Tonnage").update(recordData).eq("id", record.id) if (error) throw error toast({ variant: "success", title: "Success", description: "Record updated successfully!", }) } onSuccess() onClose() } catch (error) { console.error("Error:", error) toast({ variant: "destructive", title: "Error", description: `Failed to ${mode === "add" ? "add" : "update"} record. Please try again.`, }) } finally { setLoading(false) } } const handleClose = () => { if (!loading) { onClose() } } if (!isOpen) return null return (

{/* Header */}

{mode === "add" ? "Add New Record" : "Edit Record"}

{/* Form */}

{/* Date */}

Date * setFormData({ ...formData, Date: e.target.value })} className="h-11" required />

{/* Flight No */}

Shipment ID * setFormData({ ...formData, "Flight No.": e.target.value })} className="h-11" placeholder="e.g., SH-12345" required />

{/* KG */}

KG * setFormData({ ...formData, KG: e.target.value })} className="h-11" placeholder="e.g., 1500" required />

{/* Departure */}

Origin setFormData({ ...formData, Dep: e.target.value })} className="h-11" placeholder="e.g., NYC" />

{/* Arrival */}

Destination setFormData({ ...formData, Arr: e.target.value })} className="h-11" placeholder="e.g., LAX" />

{/* Out/In */}

Out/In

{/* ACM */}

Vehicle Type setFormData({ ...formData, ACM: e.target.value })} className="h-11" placeholder="e.g., Truck, Rail, Ship" />

{/* Registration */}

Vehicle ID setFormData({ ...formData, Reg: e.target.value })} className="h-11" placeholder="e.g., VH-001" />

{/* Footer */}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1", "@supabase/supabase-js": "2.57.4", "xlsx": "0.18.5" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^3.4.17", "typescript": "5.7.3" } } [V0_FILE]typescriptreact:file="components/flight-tonnage-stacked-chart.tsx" isMerged="true" "use client" import { useMemo, useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { BarChart, Bar, XAxis, YAxis, CartesianGrid, ResponsiveContainer, Tooltip } from "recharts" import { BarChart3Icon, CalendarIcon } from "lucide-react" import { format, startOfWeek, endOfWeek } from "date-fns" interface FlightData { Date: string "Flight No.": string ACM: string KG: number Reg: string Month: string Year: number Day: string Sector: string Dep: string Arr: string "Out/In": string Station: string "Dom/Int": string } interface FlightTonnageStackedChartProps { data: FlightData[] } const COLORS = [ "hsl(var(--chart-1))", "hsl(var(--chart-2))", "hsl(var(--chart-3))", "hsl(var(--chart-4))", "hsl(var(--chart-5))", "hsl(var(--chart-6))", "hsl(var(--chart-7))", "hsl(var(--chart-8))", "hsl(var(--chart-9))", "hsl(var(--chart-10))", ] export default function FlightTonnageStackedChart({ data }: FlightTonnageStackedChartProps) { const [viewMode, setViewMode] = useState<"Month" | "Day" | "Week">("Month") const { chartData, topRoutes } = useMemo(() => { // Get top routes by tonnage const routeTotals = data.reduce( (acc, item) => { if (!item.Dep || !item.Arr || !item.KG) return acc // Normalize route by trimming and removing all spaces const route = `${item.Dep.trim().replace(/\s+/g, "")}${item.Arr.trim().replace(/\s+/g, "")}` const tonnage = Number(item.KG) || 0 if (!acc[route]) { acc[route] = 0 } acc[route] += tonnage return acc }, {} as Record, ) const topRoutes = Object.entries(routeTotals) .sort(([, a], [, b]) => b - a) .slice(0, 10) .map(([route]) => route) // Group data by month, day, or week based on viewMode const groupedData = data.reduce( (acc, item) => { if (!item.Date || !item.KG || !item.Dep || !item.Arr) return acc const date = new Date(item.Date) // Normalize route by trimming and removing all spaces const route = `${item.Dep.trim().replace(/\s+/g, "")}${item.Arr.trim().replace(/\s+/g, "")}` const tonnage = Number(item.KG) || 0 if (!topRoutes.includes(route)) return acc // Create key based on view mode let key: string let displayKey: string if (viewMode === "Month") { key = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}` displayKey = key } else if (viewMode === "Week") { // Get the start of the week (Monday) const weekStart = startOfWeek(date, { weekStartsOn: 1 }) const weekEnd = endOfWeek(date, { weekStartsOn: 1 }) key = `${weekStart.getFullYear()}-W${String(Math.ceil((weekStart.getDate() + weekStart.getDay()) / 7)).padStart(2, "0")}-${String(weekStart.getMonth() + 1).padStart(2, "0")}-${String(weekStart.getDate()).padStart(2, "0")}` displayKey = key } else { // Day view - use full date key = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}` displayKey = key } if (!acc[key]) { acc[key] = { [viewMode === "Month" ? "month" : viewMode === "Week" ? "week" : "day"]: displayKey, total: 0, } } if (!acc[key][route]) { acc[key][route] = 0 } acc[key][route] += tonnage acc[key].total += tonnage return acc }, {} as Record, ) // Convert to array and sort by date - use all filtered data const chartData = Object.values(groupedData).sort((a: any, b: any) => { const aKey = viewMode === "Month" ? a.month : viewMode === "Week" ? a.week : a.day const bKey = viewMode === "Month" ? b.month : viewMode === "Week" ? b.week : b.day return aKey.localeCompare(bKey) }) return { chartData, topRoutes } }, [data, viewMode]) const formatDate = (dateKey: string) => { try { if (viewMode === "Month") { const [year, month] = dateKey.split("-") const date = new Date(Number(year), Number(month) - 1) return format(date, "MMM yyyy") } else if (viewMode === "Week") { // Parse week key format: YYYY-WXX-MM-DD const parts = dateKey.split("-") if (parts.length >= 4) { const year = Number(parts[0]) const month = Number(parts[2]) - 1 const day = Number(parts[3]) const weekStart = new Date(year, month, day) const weekEnd = endOfWeek(weekStart, { weekStartsOn: 1 }) return `${format(weekStart, "MMM d")} - ${format(weekEnd, "MMM d")}` } return dateKey } else { // Day view const [year, month, day] = dateKey.split("-") const date = new Date(Number(year), Number(month) - 1, Number(day)) return format(date, "MMM d") } } catch { return dateKey } } const formatWeight = (kg: number) => { if (kg >= 1000000) { return `${(kg / 1000000).toFixed(1)}M kg` } else if (kg >= 1000) { return `${(kg / 1000).toFixed(1)}k kg` } return `${kg.toFixed(0)} kg` } return (

Flight Tonnage by Routes

{viewMode === "Month" ? "Monthly tonnage breakdown by top performing routes" : viewMode === "Week" ? "Weekly tonnage breakdown by top performing routes" : "Daily tonnage breakdown by top performing routes"}

{/* Route Legend */}

{topRoutes.map((route, index) => ( {route} ))}

{/* Stacked Bar Chart */}

`${(value / 1000).toFixed(0)}t`} /> { if (!active || !payload || !payload.length) return null const total = payload.reduce((sum, entry) => sum + (entry.value || 0), 0) return (

{formatDate(label)}

{payload .sort((a, b) => (b.value || 0) - (a.value || 0)) .map((entry, index) => (

{entry.dataKey}

{formatWeight(entry.value || 0)}

))}

Total: {formatWeight(total)}

) }} /> {topRoutes.map((route, index) => ( ))}

) } [V0_FILE]typescriptreact:file="app/data-management/page.tsx" isMerged="true" import DataManagement from "@/components/data-management" import { Button } from "@/components/ui/button" import { ArrowLeft, Database } from "lucide-react" import Link from "next/link" export default function DataManagementPage() { return (

{/* Header with Back Button */}

Tonnage Records Management

{/* Data Management Component */}

) } // Wrapper component to handle data fetching on this page function DataManagementWrapper() { return } [V0_FILE]typescriptreact:file="components/data-management.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Plus, Trash2, Database, RefreshCw, Edit, AlertTriangle } from "lucide-react" import { supabase, type TonnageRecord } from "@/lib/supabase" import { format } from "date-fns" import RecordModal from "./record-modal" import { useToast } from "@/hooks/use-toast" export default function DataManagement() { const [data, setData] = useState([]) const [loading, setLoading] = useState(true) const [showDeleteMode, setShowDeleteMode] = useState(false) const [actionLoading, setActionLoading] = useState(false) const [modalOpen, setModalOpen] = useState(false) const [modalMode, setModalMode] = useState<"add" | "edit">("add") const [selectedRecord, setSelectedRecord] = useState(null) const { toast } = useToast() useEffect(() => { fetchTonnageData() }, []) const fetchTonnageData = async () => { try { setLoading(true) const { data: tonnageData, error } = await supabase .from("Raya-Tonnage") .select("*") .order("Date", { ascending: false }) if (error) { console.error("Error fetching data:", error) toast({ variant: "destructive", title: "Error", description: "Failed to fetch tonnage data. Please try again.", }) return } setData(tonnageData || []) } catch (error) { console.error("Error:", error) toast({ variant: "destructive", title: "Error", description: "An unexpected error occurred while fetching data.", }) } finally { setLoading(false) } } const handleDeleteRecord = async (id: number) => { const record = data.find((r) => r.id === id) const confirmMessage = `Are you sure you want to delete this record?\n\nShipment: ${record?.["Flight No."] || "N/A"}\nDate: ${record?.Date ? format(new Date(record.Date), "MMM d, yyyy") : "N/A"}` if (!confirm(confirmMessage)) return setActionLoading(true) try { const { error } = await supabase.from("Raya-Tonnage").delete().eq("id", id) if (error) { console.error("Error deleting record:", error) toast({ variant: "destructive", title: "Delete Failed", description: "Failed to delete record. Please try again.", }) return } toast({ variant: "success", title: "Success", description: "Record deleted successfully!", }) fetchTonnageData() } catch (error) { console.error("Error:", error) toast({ variant: "destructive", title: "Error", description: "An unexpected error occurred while deleting the record.", }) } finally { setActionLoading(false) } } const openAddModal = () => { setModalMode("add") setSelectedRecord(null) setModalOpen(true) } const openEditModal = (record: TonnageRecord) => { setModalMode("edit") setSelectedRecord(record) setModalOpen(true) } const closeModal = () => { setModalOpen(false) setSelectedRecord(null) } const handleModalSuccess = () => { fetchTonnageData() } if (loading) { return (

Loading Data

Fetching tonnage records...

) } return (

{/* Stats Cards */}

{data.length.toLocaleString()}

Total Records

{data.reduce((sum, item) => sum + (item.KG || 0), 0).toLocaleString()} kg

Total Tonnage

{data[0]?.Date ? format(new Date(data[0].Date), "MMM d") : "N/A"}

Latest Record

{/* Main Data Management Card */}

Tonnage Records Management

{/* Delete Mode Warning */} {showDeleteMode && (

Delete mode is active. Click the delete button next to any record to remove it permanently.

)} {/* Records Table */}

All Records

{data.length} total records (showing most recent first)

{data.map((record) => ( ))}

Date	Shipment	Route	KG	Direction	Vehicle Type	Vehicle ID	Actions
{record.Date ? format(new Date(record.Date), "MMM d, yyyy") : "N/A"}	{record["Flight No."] \|\| "N/A"}	{record.Dep && record.Arr ? `${record.Dep} → ${record.Arr}` : "N/A"}	{record.KG?.toLocaleString() \|\| 0} kg	{record["Out/In"] \|\| "N/A"}	{record.ACM \|\| "N/A"}	{record.Reg \|\| "N/A"}	{showDeleteMode && ( )}

{/* Record Modal */}

) } [V0_FILE]typescriptreact:file="app/metrics/page.tsx" isMerged="true" import MetricsDashboard from "@/components/metrics-dashboard" export default function MetricsPage() { return } [V0_FILE]typescriptreact:file="components/metrics-dashboard.tsx" isMerged="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { BarChart3, ArrowLeft } from "lucide-react" import Link from "next/link" export default function MetricsDashboard() { return (

{/* Header matching data management page style */}

{/* Title Section matching data management page */}

Metrics Dashboard

{/* PostHog Dashboard - Final height adjustment */}

About

Tags

Share

About

Tags

Share

More from jeffmpan

More Templates Like This